
import React, { useEffect } from 'react';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { ProLayout } from '@ant-design/pro-components';
import { App as AntApp } from 'antd';
import { useAppStore } from './store';
import { menuRoutes } from './routes';
import './App.css';

function App() {
  const navigate = useNavigate();
  const location = useLocation();
  const { loadConfig } = useAppStore();

  useEffect(() => {
    loadConfig();
  }, [loadConfig]);

  return (
    <div style={{ height: '100vh' }}>
      <ProLayout
        title="Desktop Agent"
        logo={null}
        layout="side"
        route={{
          path: '/',
          routes: menuRoutes,
        }}
        location={location}
        onMenuHeaderClick={() => navigate('/')}
        menuItemRender={(item, dom) => (
          <a onClick={() => navigate(item.path || '/')}>{dom}</a>
        )}
      >
        <Outlet />
      </ProLayout>
    </div>
  );
}

export default App;
